<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京剧简介</title>
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/introduction.css">
    <script src="js/jquery-1.6.1.min.js"></script>
    <script src="js/parallax.js"></script>
    <script src="js/lazyintro.js"></script>
</head>

<body>
    <div class="head_son">
        <div class="left">
            <div class="logo"></div>
            <div class="text">京剧四讲堂</div>
        </div>
        <div class="right">
            <ul>
                <li><a href="./index.html">返回上一级</a></li>
                <li><a href="./京剧简介.html">京剧简介</a></li>
                <li><a href="./京剧起源.html">京剧起源与发展</a></li>
                <li><a href="./京剧四大功夫.html">四大功夫</a></li>
                <li><a href="./京剧行当.html">京剧行当</a></li>
            </ul>
        </div>
    </div>
    <div id="wrapper">
        <!-- 导航部分 -->
        <nav id="primary">
            <ul>
                <li>
                    <a href="#" class="jump_to n0" rel="0">章节</a>
                    <h2>主页</h2>
                </li>
                <li>
                    <a href="#" class="jump_to n1" rel="1">章节</a>
                    <h2>关于京剧你知道哪些</h2>
                </li>
                <li>
                    <a href="#" class="jump_to n2" rel="2">章节</a>
                    <h2>京剧的艺术表现</h2>
                </li>
                <li>
                    <a href="#" class="jump_to n3" rel="3">章节</a>
                    <h2>京剧的影响及价值</h2>
                </li>
                <li>
                    <a href="#" class="jump_to n4" rel="4">章节</a>
                    <h2>京剧的服饰</h2>
                </li>
            </ul>
        </nav>
        <!-- 内容 -->
        <article id="article0">
            <div class="head">
                <div class="body"></div>
                <footer class="next_prev">
                    <a class="jump_to next" href="#" rel="1"></a>
                </footer>
            </div>
        </article>
        <div id="content">

            <article id="article1">
                <section class="section">
                    <h2>关于京剧你知道哪些？</h2>
                    <p>京剧,又称平剧京戏等,中国国粹之一,是中国影响最大的戏曲剧种,分布地以北京为中心,遍及全国各地,清代乾隆五十五年(1790年)起,原在南方演出的三庆、四喜、春台和春111等多以安徽籍艺人为主的四大徽班陆续进入北京与来自湖北的汉调艺人合作,同时接受了昆曲,奉腔的部分剧目,曲调和表演方法,又吸收了一些地方民间曲调,通过不断的交流、融合,最终形成京剧.
                    </p>
                </section>
                <footer class="next_prev">
                    <i class="spacing_line"></i>
                    <a class="jump_to next" href="#" rel="2"></a>
                </footer>
            </article>

            <article id="article2">
                <section class="section">
                    <h2>京剧的艺术表现</h2>
                    <p>京剧在文学、表演、音乐、舞台美术等各个方面都有一套规范化的艺术表现形式。京刚的唱腔属板式变化体,以二备、西皮为主要声腔。京剧伴奏分文场和武场两大类,文场以胡琴为主奏乐器,武场以打击乐伴奏为主
                        (鼓板、大锣、铙钹、小锣)·京剧的角色分为生、旦、净、丑、杂、武、流等行当后三行已不再立专行。京剧现在的角色分为生、旦、净、丑四种。各行当都有一套表演形式,唱念做打的技艺各具特色。京剧以历史故事为主要演出内容,传统刚目约有一千三百多个,常演的在三四百个以上。
                    </p>
                </section>
                <footer class="next_prev">
                    <a class="jump_to prev" rel="1"></a>
                    <i class="spacing_line"></i>
                    <a class="jump_to next" href="#" rel="3"></a>
                </footer>
            </article>

            <article id="article3">
                <section class="section">
                    <h2>京剧的影响及价值</h2>
                    <p>京剧流播全国,影响甚广,有"国剧"之称。以梅兰芳命名的京剧表演体系被视为东方戏剧表演体系的代表,为世界三大表演体系之一,京剧是中华民族传统文化的重要表现形式,其中的多种艺术元素被用作中国传统文化的象征符号2006年5月,京剧被国务院批准列入第一批国家级非物质文化遗产名录。1212010年,被列入联合国教科文组织非物质文化遗产名录(名册)人类非物质文化遗产代表名录
                    </p>
                </section>
                <footer class="next_prev">
                    <a class="jump_to prev" rel="2"></a>
                    <i class="spacing_line"></i>
                    <a class="jump_to next" href="#" rel="4"></a>
                </footer>
            </article>

            <article id="article4">

                <footer class="next_prev">
                    <a class="jump_to prev" rel="3"></a>
                    <i class="spacing_line"></i>
                </footer>
                <div class="footer_in">
                    <div class="footer_one" style="box-sizing: border-box;">
                        <div class="left" style="box-sizing: border-box;">
                            <div class="imgfather">
                                <div class="img" id="needmagnify" style="box-sizing: border-box;"></div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="text">
                                <h1>脸谱</h1>
                                <p> 京剧脸谱,是一种具有中国文化特色的特殊化妆方法。
                                    由于每个历史人物或某一种类型的人物都有一种大概
                                    的谱式,就像唱歌、奏乐都要按照乐谱一样,所以称
                                    为“脸谱”。关于脸谱的来源,一般的说法是来自假
                                    面具。京剧脸谱艺术是广大戏曲爱好者的非常喜爱的
                                    一门艺术,国内外都很流行,已经被大家公认为是中
                                    国传统文化的标识之一。
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="footer_two">
                        <div class="left">
                            <div class="text">
                                <h1>盔头</h1>
                                <p>
                                    传统戏曲剧中人所戴各种冠帽的通称。大体分冠、盔、
                                    巾、帽 4类。冠,多为帝王、贵族的礼帽；盔,为武
                                    职人员所戴；巾,多为软件,属于便服；帽类最杂,自
                                    皇帽至草帽,有硬有软,名目繁多。
                                </p>
                            </div>
                        </div>
                        <div class="right">
                            <div class="imgfather">
                                <div class="img" id="needblowup"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
        <!-- 人物 -->
        <div id="parallax_area1">
            <img class="parallax_img p1_1" src="img/人1.png" width="430" height="757">
            <img class="parallax_img p1_2" src="img/人2.png" width="500" height="740">
            <img class="parallax_img p1_3" src="img/人3.png" width="400" height="713">
        </div>
        <!-- 山1 -->
        <div id="parallax_area2">
            <img class="parallax_img p2_1" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_2" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_3" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_4" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_5" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_6" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_7" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_8" src="img/cloud1.png" width="488" height="138">
            <img class="parallax_img p2_9" src="img/cloud1.png" width="488" height="138">
        </div>
        <!-- 山2 -->
        <div id="parallax_area3">
            <img class="parallax_img p3_1" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_2" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_3" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_4" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_5" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_6" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_7" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_8" src="img/cloud2.png" width="311" height="105">
            <img class="parallax_img p3_9" src="img/cloud2.png" width="311" height="105">
        </div>

    </div>
    <script src="js/narrow.js"></script>
</body>

</html>